<template>
  <div>
    <div class="aaa" id="customerChart"></div>
  </div>
</template>

<script>
export default {
  name: "data_page",
  mounted() {
    this.$nextTick(() => {
      this.drawRYLFPie()
    })
    // addEventListener("resize", () => {
    //   this.drawRYLFPie()
    // })
  },
  methods: {
    drawRYLFPie() {
      let myChart = this.$echarts.getInstanceByDom(
        document.getElementById("customerChart")
      )
      if (myChart == null) {
        // 如果不存在，就进行初始化
        myChart = this.$echarts.init(document.getElementById("customerChart"))
      }
      var value = 40
      var max = 100
      var option = {
        title: {
          show: false
        },
        angleAxis: {
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          min: 0,
          max: 135,
          startAngle: 225
        },
        radiusAxis: {
          type: "category",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          z: 10
        },
        polar: {
          radius: "84%"
        },
        series: [
          {
            type: "bar",
            data: [, , value],
            z: 1,
            coordinateSystem: "polar",
            barMaxWidth: 24.2,
            roundCap: true,
            color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#2EE5E3"
              },
              {
                offset: 1,
                color: "#385BF7"
              }
            ]),
            barGap: "-100%"
          },
          {
            type: "bar",
            data: [, , max],
            z: 0,
            silent: true,
            coordinateSystem: "polar",
            barMaxWidth: 24.2,
            roundCap: true,
            color: "#EFF3F6",
            barGap: "-100%"
          },
          {
            name: "刻度",
            type: "gauge",
            startAngle: 225,
            endAngle: -45,
            min: 0,
            max: 100,
            splitNumber: 10, //刻度数量
            radius: "69%",
            axisLine: {
              show: false
            },
            title: {
              show: false
            },
            detail: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              length: 8,
              lineStyle: {
                width: 3,
                color: "#E1E6EA"
              }
            },
            axisLabel: {
              color: "#858C92"
            },
            pointer: {
              // 分隔线
              shadowColor: "auto",
              //默认透明
              shadowBlur: 10,
              length: "50%",
              width: 2
            },
            itemStyle: {
              color: "#969DA2",
              borderColor: "#969DA2",
              borderWidth: 2
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 25,
              itemStyle: {
                borderWidth: 5,
                borderColor: "#969DA2"
              }
            },
            data: [
              {
                status: "正常",
                value: value
              }
            ]
          }
        ],
        tooltip: {
          show: false
        }
      }

      myChart.setOption(option)
      setTimeout(() => {
        myChart.resize()
      }, 5000)
    }
  }
}
</script>

<style lang="less" scoped>
.aaa {
  width: 500px;
  height: 500px;
  // background-color: red;
}
</style>
